<template>
  <div>
    <el-form :inline="true">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="名称">
            <el-input v-model="queryParam.CategoryName" @keyup.enter.native="research" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="编号">
            <el-input v-model="queryParam.CategoryCode" @keyup.enter.native="research" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button type="warning" round @click="research">
          查询
        </el-button>
      </el-row>
    </el-form>

    <el-row style="margin-top: 20px">
      <el-button type="primary" @click="toAdd">
        添加
      </el-button>
    </el-row>

    <el-table
      :data="data"
      border
      size="small"
      :height="tableHeight"
      fit
      highlight-current-row
      style="width: 100%; margin-top: 20px"
      @sort-change="sortChange"
    >
      <el-table-column label="名称" sortable="custom" prop="CategoryName" />
      <el-table-column label="编号" sortable="custom" prop="CategoryCode" />
      <el-table-column label="类型" sortable="custom" prop="CategoryType" width="100px">
        <template slot-scope="scope">
          {{ scope.row.CategoryType | dictFilter(enums.dictTypeEnum) }}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="Remarks" width="150px" :show-tooltip-when-overflow="true" />
      <el-table-column label="创建时间" prop="CreatedAt" sortable="custom" width="120px">
        <template slot-scope="scope">
          {{ scope.row.CreatedAt | parseDate }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间" prop="UpdatedAt" sortable="custom" width="120px">
        <template slot-scope="scope">
          {{ scope.row.UpdatedAt | parseDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="toEdit(scope.row)">
            修改
          </el-button>
          <el-button type="text" @click="toDel(scope.row)">
            删除
          </el-button>
          <el-button v-if="scope.row.CategoryType === enums.dictTypeEnum.Simple.value" type="text" @click="toDict(scope.row)">
            查看字典
          </el-button>
          <el-button v-if="scope.row.CategoryType === enums.dictTypeEnum.Simple.value" type="text" @click="toGoCode(scope.row)">
            GO枚举
          </el-button>
          <el-button v-if="scope.row.CategoryType === enums.dictTypeEnum.Simple.value" type="text" @click="toNodejsCode(scope.row)">
            NODEJS枚举
          </el-button>
          <el-button v-if="scope.row.CategoryType === enums.dictTypeEnum.SQL.value" type="text" @click="toEditSql(scope.row)">
            编辑SQL
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-pagination
          v-show="TotalRecord>0"
          :current-page="queryParam.CurrentPage"
          :page-sizes="[10,20,30, 50]"
          :page-size="queryParam.PageSize"
          :total="TotalRecord"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog :visible.sync="codeDialog.show" width="70%" :close-on-click-modal="false">
      <p v-html="codeDialog.code" />
    </el-dialog>
  </div>
</template>

<script>
import reportDbTypeEnum from '@/enums/reportDb/reportDbTypeEnum'
import apolloClient from '@/utils/graphql'
import gql from 'graphql-tag'
import dictTypeEnum from '@/enums/sys/dictTypeEnum'

export default {
  name: 'DictCategoryList',
  data() {
    return {
      queryParam: {
        CurrentPage: 1,
        PageSize: 20,
        CategoryName: null,
        CategoryCode: null,
        OrderBy: '',
        OrderColumn: ''
      },
      data: [],
      TotalRecord: 0,
      currentRow: '',
      enums: {
        reportDbTypeEnum,
        dictTypeEnum
      },
      codeDialog: {
        show: false,
        code: ''
      }

    }
  },
  computed: {
    // 返回当前列的数据
    currentData() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return {}
      }
      return this.data[this.currentRow]
    },
    tableHeight() {
      return document.body.clientHeight - 300
    }
  },
  mounted() {

  },
  activated() {
    this.search()
  },
  methods: {
    sortChange(column) {
      this.queryParam.OrderBy = column.order
      this.queryParam.OrderColumn = column.prop
      this.research()
    },
    toAdd() {
      this.$router.push(`/dictCategory/add`)
    },
    toEdit(row) {
      console.log(row)
      this.$router.push(`/dictCategory/edit/${row.DictionaryCategoryId}`)
    },
    toDict(row) {
      console.log(row)
      this.$router.push(`/dict/list/${row.DictionaryCategoryId}`)
    },
    toEditSql(row) {
      this.$router.push(`/dictCategory/editSql/${row.DictionaryCategoryId}`)
    },
    toGoCode(row) {
      apolloClient.query({
        fetchPolicy: 'network-only',
        query: gql`query ($req: String!) {
                    dictCategoryGoCode(dictCategoryId: $req)
                    }`,
        variables: { req: row.DictionaryCategoryId }
      }).then(response => {
        this.codeDialog.code = response.data.dictCategoryGoCode.replaceAll('\n', '<br/>')
        // this.codeDialog.show = true
        var that = this
        this.$copyText(response.data.dictCategoryGoCode).then(function(e) {
          that.$notify.success('已复制到剪贴板')
        }, function(e) {
          alert('Can not copy')
          console.log(e)
        })
      })
    },
    toNodejsCode(row) {
      apolloClient.query({
        fetchPolicy: 'network-only',
        query: gql`query ($req: String!) {
                    dictCategoryNodejsCode(dictCategoryId: $req)
                    }`,
        variables: { req: row.DictionaryCategoryId }
      }).then(response => {
        this.codeDialog.code = response.data.dictCategoryNodejsCode.replaceAll('\n', '<br/>')
        // this.codeDialog.show = true
        var that = this
        this.$copyText(response.data.dictCategoryNodejsCode).then(function(e) {
          that.$notify.success('已复制到剪贴板')
        }, function(e) {
          alert('Can not copy')
          console.log(e)
        })
      })
    },
    toDel(row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apolloClient.mutate({
          mutation: gql`mutation($unionId:String!){
                    dictCategoryDelete(dictCategoryId:$unionId)
                }`,
          variables: { unionId: row.DictionaryCategoryId }
        }).then(response => {
          if (response.data) {
            this.$notify.success('操作成功')
            this.research()
          } else {
            this.$notify.error(response.errors[0].message)
          }
        }).catch((err) => {
          this.$notify.error(err.message)
        })
      })
    },
    search() {
      apolloClient.query({
        fetchPolicy: 'network-only',
        query: gql`query ($req: DictCategoryPageReq!) {
                    dictCategoryPage(Req: $req){
                        TotalRecord
                        Records{
                            DictionaryCategoryId
                            CategoryName
                            CategoryCode
                            Remarks
                            UpdatedAt
                            CreatedAt
                            CategoryType
                        }
                    }
                }`,
        variables: { req: this.queryParam }
      }).then(response => {
        console.log(response)
        var responseData = response.data
        this.data = responseData.dictCategoryPage.Records
        this.TotalRecord = responseData.dictCategoryPage.TotalRecord
      })
    },

    // 处理每页大小改变
    handleSizeChange(val) {
      this.queryParam.PageSize = val
      this.search()
    },
    // 处理页数改变
    handleCurrentChange(val) {
      this.queryParam.CurrentPage = val
      this.search()
    },
    // 重置分页条件，发起查询
    research() {
      this.queryParam.CurrentPage = 1
      this.search()
    }

  }
}
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
